<template>
  <div class="feedback-page">
    <van-nav-bar title="意见与反馈" />

    <van-tabs v-model:active="activeTab" sticky>
      <!-- ==================== 提交反馈 Tab ==================== -->
      <van-tab title="提交反馈">
        <div class="form-wrapper">
          <van-form @submit="onSubmit">
            <van-cell-group inset title="反馈类型">
              <van-radio-group v-model="form.type" direction="horizontal" class="radio-group">
                <van-radio name="suggestion">功能建议</van-radio>
                <van-radio name="bug">界面问题</van-radio>
                <van-radio name="complaint">服务投诉</van-radio>
              </van-radio-group>
            </van-cell-group>
            
            <van-cell-group inset title="反馈内容">
              <van-field
                v-model="form.content"
                rows="4"
                autosize
                type="textarea"
                maxlength="500"
                placeholder="请详细描述您的问题或建议，以便我们更好地为您服务。"
                show-word-limit
                :rules="[{ required: true, message: '请填写反馈内容' }]"
              />
            </van-cell-group>
            
            <van-cell-group inset title="服务评价 (选填)">
              <div class="rate-wrapper">
                 <van-rate v-model="form.rating" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
              </div>
            </van-cell-group>

            <van-cell-group inset title="上传图片 (选填)">
                <div class="uploader-wrapper">
                    <van-uploader v-model="form.images" multiple :max-count="3" />
                </div>
            </van-cell-group>
            
            <div class="submit-button-wrapper">
              <van-button round block type="primary" native-type="submit" :loading="isSubmitting">
                提交反馈
              </van-button>
            </div>
          </van-form>
        </div>
      </van-tab>

      <!-- ==================== 我的反馈 Tab ==================== -->
      <van-tab title="我的反馈">
        <div class="history-wrapper">
          <van-empty v-if="historyList.length === 0" description="暂无历史反馈记录" />
          <van-collapse v-model="activeCollapse" accordion v-else>
            <van-collapse-item v-for="item in historyList" :key="item.id" :name="item.id">
                <template #title>
                    <div class="collapse-title">
                        <span>{{ item.content.substring(0, 15) }}...</span>
                        <van-tag :type="statusInfo[item.status].type">{{ statusInfo[item.status].text }}</van-tag>
                    </div>
                </template>
                <div class="feedback-content">
                    <p class="user-feedback">{{ item.content }}</p>
                    <div class="time-info">{{ item.createdAt }}</div>
                </div>
                <div v-if="item.reply" class="admin-reply">
                    <div class="reply-header">
                        <van-icon name="manager-o" />
                        官方回复
                    </div>
                    <p class="reply-content">{{ item.reply }}</p>
                </div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';

// --- 状态管理 ---
const activeTab = ref(0);
const isSubmitting = ref(false);

// --- 提交反馈 Tab ---
const form = ref({
  type: 'suggestion',
  content: '',
  rating: 0,
  images: [], // 用于存储 Uploader 的文件列表
});

const onSubmit = (values) => {
  isSubmitting.value = true;
  console.log('提交的反馈数据:', form.value);
  showToast.loading({ message: '正在提交...', forbidClick: true, duration: 1500 });
  
  setTimeout(() => {
    isSubmitting.value = false;
    showToast.success('感谢您的反馈！');
    // 可以在此清空表单并刷新历史记录
    form.value.content = '';
    form.value.rating = 0;
    form.value.images = [];
    // 切换到历史记录页
    activeTab.value = 1;
  }, 1500);
};

// --- 我的反馈 Tab ---
const activeCollapse = ref();
const historyList = ref([
  {
    id: 1,
    content: '希望首页能增加一个天气预报的功能，方便我们了解养老院当地的天气情况，为探访做准备。',
    createdAt: '2023-11-20 14:30',
    status: 'replied',
    reply: '您好，非常感谢您的宝贵建议！天气功能我们已经记录下来，并将在后续的版本更新中进行评估。感谢您的支持！'
  },
  {
    id: 2,
    content: '账单页面的年度总支出好像没有计算正确，我支付过的账单没有被统计进去，请核查。',
    createdAt: '2023-11-18 09:15',
    status: 'processing',
    reply: null,
  },
  {
    id: 3,
    content: '服务人员态度很好，点个赞！',
    createdAt: '2023-11-15 18:00',
    status: 'pending',
    reply: null,
  }
]);

// 状态映射
const statusInfo = {
  pending: { text: '待处理', type: 'warning' },
  processing: { text: '处理中', type: 'primary' },
  replied: { text: '已回复', type: 'success' },
};
</script>

<style scoped>
.feedback-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}
.form-wrapper, .history-wrapper {
  padding: 16px 0;
}
.history-wrapper {
    padding: 16px;
}

/* 提交反馈 Tab 样式 */
.radio-group {
  padding: 10px 16px;
  display: flex;
  justify-content: space-around;
}
.rate-wrapper, .uploader-wrapper {
    padding: 16px;
}
.submit-button-wrapper {
  margin: 24px 16px;
}

/* 我的反馈 Tab 样式 */
.van-collapse-item {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}
.collapse-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.feedback-content {
    padding: 12px 16px;
    font-size: 14px;
    color: #323233;
    background-color: #f7f8fa;
}
.user-feedback {
    line-height: 1.6;
    margin: 0 0 10px 0;
}
.time-info {
    font-size: 12px;
    color: #969799;
    text-align: right;
}
.admin-reply {
    background-color: #eef2ff;
    padding: 12px 16px;
    border-top: 1px solid #e0eaff;
}
.reply-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #3a7afe;
    margin-bottom: 8px;
}
.reply-header .van-icon {
    margin-right: 6px;
}
.reply-content {
    font-size: 14px;
    color: #323233;
    line-height: 1.6;
    margin: 0;
}
</style>